<template>
  <div class="container">
      <div class='login_content'>
        <div class='user_photo'><open-data type="userAvatarUrl"></open-data></div>
        <div class='user_nickname'><open-data type="userNickName"></open-data></div>

        <div v-if="currentStep == 1">
          <button  v-if="canIUse" class="login_btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权登录</button>
          <div v-else>请升级微信版本</div>
          <button class="back_btn" @click="toHome">取消</button>
          <!--<div class="remind">温馨提醒：注册用户只能使用平台上的快速识别功能，如需使用项目管理功能
            请在个人中心页面联系客服</div>-->
        </div>

        <div class="input_info" v-if="currentStep == 2">
          <div class="item">
            <label>用户姓名</label>
            <input type="text" placeholder="请输入用户姓名" v-model="username">
          </div>
          <div class="item">
            <label>公司名称</label>
            <input type="text" placeholder="请输入公司名称" v-model="companyName">
          </div>
          <div class="item">
            <label>单位类型</label>
            <picker
              @change="selectCompany"
              :value="companyType_index"
              :range="companyType_data">
              <input type="text" disabled="disabled" placeholder="请选择" v-model="companyType">
            </picker>
          </div>
          <button  v-if="canIUse" class="login_btn" style="width: 200px" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber">微信用户快捷登陆</button>
        </div>

      </div>
  </div>
</template>
<script>
import { error } from 'util';
export default {
  data () {
    return {
      canIUse: wx.canIUse('button.open-type.getUserInfo'),
      loginType:'',
      companyType_data: [],
      companyType_index:[0],
      username: '',
      companyName: '',
      companyType: '',
      currentStep: 1
    }
  },
  methods: {
    async register(phone){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/auth/bindingPhone',{phone:phone,user_token:userToken});
      if(res.data.level=="success"){
        this.$currency.showToast(res.data.message,'success',3000);
        this.$bus.$data.updateHome=true;//告知首页跟新信息
        wx.navigateBack({
          delta: 1
        })
      }else{
        this.$currency.showToast(res.data.message,'none',3000)
      }
    },
    async bindGetUserInfo(e){
      var _this=this;
      wx.login({
          success : res =>{
             let code=res.code;

              wx.getUserInfo({
                success:res =>{
                  _this.$store.dispatch('setUserInfo',res);   //把获取到的用户的信息存放在vuex中进行管理
                  _this.$request.postData('/auth/wxLogin',{raw_data:res.rawData,signature:res.signature,code:code}).then(res1 =>{
                  if(res1.data.level=="success")
                    {
                      wx.setStorageSync('userToken',res1.data.data);
                      _this.getDataByUserInfo(res1.data);
                    }else{
                      _this.$currency.showToast(res1.data.message,'none',2500)
                    }
                })
                }
              })
          }
      })
    },
    async getDataByUserInfo(data) {
      let res = await this.$request.getData('/ucenter/getUserInfo',{user_token:data.data})
      if (res.data.level == 'success'){
        if(!res.data.data.phone){
          this.currentStep = 2
        } else{
          if(data.action=='home')
          {
            wx.showLoading({
              title: '加载中',
            })
            this.$bus.$data.updateHome=true;//告知首页跟新信息
            wx.navigateBack({
              delta: 1
            })
          }else{
            this.$currency.navigateTo('/pages/register/main')
          }
        }
      } else{
        this.$currency.showToast(res.data.message,'none',2500)
      }

    },
    async bindPhoneNumber(e){
      const _this=this

      const userToken = wx.getStorageSync('userToken');
      this.$request.postData('/ucenter/setUserDetail',
        {realname:this.username,
          company_name:this.companyName,
          company_type:this.companyType,
          user_token: userToken}).then(res =>{
        if(res.data.level=="success")
        {
          if (e.target.errMsg == 'getPhoneNumber:ok') {
            wx.checkSession({
              async fail(){
                // const ask= await _this.sendWxCode()
                wx.login({
                  success: async function(e){
                    const code=e.code;
                    var userToken=wx.getStorageSync('userToken')
                    const res=await _this.$request.postData('/auth/getWeChatPhone',{
                      user_token:userToken,
                      iv:e.mp.detail.iv,
                      encryptedData:e.mp.detail.encryptedData,
                      code:code
                    })
                    if(res.data.level=='success'){
                      _this.register(JSON.parse(res.data.data).phoneNumber);
                    }else{
                      _this.$currency.showToast(res.data.message,'none',3000)
                    }

                  },
                  fail(e){
                    console.log(e);
                  }
                })
              },
              success:async function(){
                var userToken=wx.getStorageSync('userToken')
                const res=await _this.$request.postData('/auth/getWeChatPhone',{
                  user_token:userToken,
                  iv:e.mp.detail.iv,
                  encryptedData:e.mp.detail.encryptedData
                })
                if(res.data.level=='success'){
                  _this.register(JSON.parse(res.data.data).phoneNumber);
                }else{
                  _this.showToast(res.data.message)
                }
              }
            })
          }
        }else{
          this.$currency.showToast(res.data.message,'none',2500)
        }
      })
    },
    toHome(){
      this.$bus.$data.updateHome=true;
      wx.navigateBack({
        delta: 1
      })
    },
    selectCompany(e) {
      this.companyType_index = e.target.value
      this.companyType = this.companyType_data[this.companyType_index]
    },
    async getUnitTypeList() {
      let res=await this.$request.getData('/other/getUnitTypeList',{});
      this.companyType_data = res.data.data;
    }
  },
  onLoad(options){
    // this.loginType=options.type
    // console.log(this.loginType)
  },
  onShow() {
    this.getUnitTypeList();
  }
  // onHide(){
  //   this.loginType=''
  // }
}
</script>
<style scoped lang="scss">
.login_content{width: 100%;position: absolute;left: 0;top: 20%;}

.user_photo{width: 100px;margin:0 auto;border-radius: 20px}
.user_nickname{text-align: center;margin-top: 20px}
button{
  width:150px;
  height: 50px;
  margin: 30px auto 10px auto;
  border-radius:10px;
  border: solid 1px green;
  background-color: green;
  color: #fff
  }
.back_btn{
  text-align: center;
  margin: 10px auto;
  border: solid 1px green;
  background-color: white;
  color: green
}

.remind{
  text-align: center;
  padding: 20px 20px 0;
}

.input_info{
  padding-top: 20px;
  .item{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  label{
    font-size: 16px;
  }
  input{
    max-width: 70%;
    text-align: left;
    font-size: 16px;
    margin-left: 15px;
  }
}

</style>
